<template>
  <div class="hedgeHandle">
    <!-- 套保订单  -->
    <template v-if="data.isHedging">
      <a-space>
        <c-button
          type="primary"
          v-if="$verifyBtn('sellerCloseHedgeOrder')"
          @click="transitionArtificialOrder"
          >转手动挂单</c-button
        >
        <!-- 待挂单才有关联期货订单按钮 -->
        <!-- <c-button
          @click="relationFuturesOrders"
          v-if="data.orderStatus === orderDict.pricingStatus.wait.value"
          >关联期货订单</c-button
        > -->
      </a-space>
    </template>
    <!-- 非套保订单 -->
    <!-- <template v-else>
      <c-button type="primary" @click="transitionAutoHedge"
        >转自动套保</c-button
      >
    </template> -->
    <c-modal
      :title="modalTitle"
      v-model="visible"
      @ok="relationFuturesOrdersSubmit"
      destroyOnClose
    >
      <a-form-model
        :model="form"
        ref="form"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 12 }"
      >
        <template v-for="(item, idx) in form.items">
          <!-- <a-divider dashed orientation="left" :key="idx">
            关联期货订单{{ idx + 1 }}
          </a-divider> -->
          <!-- <a-form-model-item
            :label="`期货报单编号`"
            :key="'futuresCode' + idx"
            :prop="'items.' + idx + '.futuresCode'"
            :rules="{
              required: true,
              message: '请输入期货报单编号',
              trigger: 'change'
            }"
          >
            <a-input
              v-model="item.futuresCode"
              placeholder="请输入期货报单编号"
            ></a-input>
          </a-form-model-item> -->
          <a-form-model-item
            v-if="idx === 0"
            :label="`套保总吨数`"
            :key="'hedgeAmount' + idx"
            :prop="'items.' + idx + '.hedgeAmount'"
            :rules="{
              required: true,
              message: '请输入套保吨数',
              trigger: 'change'
            }"
          >
            <a-input
              v-model="item.hedgeAmount"
              placeholder="请输入套保吨数"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item
            v-else
            :label="`本地报单号${idx}`"
            :key="'orderRef' + idx"
            :prop="'items.' + idx + '.orderRef'"
            :rules="{
              required: true,
              message: '请输入本地报单号',
              trigger: 'change'
            }"
          >
            <a-input
              v-model="item.orderRef"
              placeholder="请输入本地报单号"
            ></a-input>
          </a-form-model-item>
        </template>
        <a-form-model-item label=" " :colon="false">
          <c-button ghost type="primary" @click="addOrderRef"
            >添加期货订单</c-button
          >
        </a-form-model-item>
      </a-form-model>
    </c-modal>
  </div>
</template>

<script>
import {
  providercloseslideorderhedge,
  provideropenslideorderhedge
} from "@/api/order/hedge";
import orderDict from "@/dict/order";

export default {
  props: {
    // 订单信息
    data: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      orderDict,
      modalTitle: undefined, // 弹窗标题
      visible: false, // 弹窗显隐
      form: {
        items: []
      }
    };
  },
  methods: {
    // 转自动套保
    transitionAutoHedge() {
      this.modalTitle = "转自动套保";
      this.visible = true;
      this.form.items = [
        {
          hedgeAmount: undefined
        },
        {
          orderRef: undefined
        }
      ];
    },
    // 转手动挂单
    transitionArtificialOrder() {
      let _this = this;
      this.$confirm({
        title: "温馨提示",
        content: "是否确认将该订单转为手动订单？",
        onOk() {
          return new Promise(resolve => {
            providercloseslideorderhedge({
              orderId: _this.data.id,
              version: _this.data.version
            }).then(res => {
              _this.$emit("handleSuccess", {
                data: res,
                type: "transitionArtificialOrder"
              });
              _this.$message.success("操作成功");
              resolve();
            });
          });
        }
      });
    },
    // 关联期货订单
    relationFuturesOrders() {
      this.modalTitle = "关联期货订单";
      this.visible = true;
      this.form.items = [
        {
          hedgeAmount: undefined
        },
        {
          orderRef: undefined
        }
      ];
    },
    // 添加期货订单
    addOrderRef() {
      this.form.items.push({
        orderRef: undefined
      });
    },
    // 提交关联期货订单
    relationFuturesOrdersSubmit() {
      this.$refs.form.validate().then(() => {
        let hedgeRelations = this.form.items.filter((item, idx) => idx !== 0);
        provideropenslideorderhedge({
          orderId: this.data.id,
          version: this.data.version,
          hedgeAmount: this.form.items[0].hedgeAmount,
          hedgeRelations: hedgeRelations
        }).then(res => {
          this.$emit("handleSuccess", {
            data: res,
            type: "relationFuturesOrders"
          });
          this.$message.success("操作成功");
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.hedgeHandle {
  .ant-form {
    text-align: left;
    max-height: 550px;
    overflow: auto;
  }
}
</style>
